/* 果冻动画(按钮) */
@-webkit-keyframes jello-horizontal{
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
@keyframes jello-horizontal {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}
.jello-horizontal {
    animation: jello-horizontal 0.9s both;
    -webkit-animation: jello-horizontal 0.9s both;
}
/* 扩展(文字) */
@-webkit-keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}
@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}
.tracking-in-expand {
    -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
/* 右侧滑入 */
@-webkit-keyframes slide-in-fwd-right {
    0% {
        -webkit-transform: translateZ(-1400px) translateX(1000px);
        transform: translateZ(-1400px) translateX(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0) translateX(0);
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
}
@keyframes slide-in-fwd-right {
    0% {
        -webkit-transform: translateZ(-1400px) translateX(1000px);
        transform: translateZ(-1400px) translateX(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateZ(0) translateX(0);
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
}
.slide-in-fwd-right {
    -webkit-animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-fwd-right 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* 左右摆入 */
@-webkit-keyframes swing-in-left-bck {
    0% {
        -webkit-transform: rotateY(-70deg);
        transform: rotateY(-70deg);
        -webkit-transform-origin: left;
        transform-origin: left;
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
        -webkit-transform-origin: left;
        transform-origin: left;
        opacity: 1;
    }
}
@keyframes swing-in-left-bck {
    0% {
        -webkit-transform: rotateY(-70deg);
        transform: rotateY(-70deg);
        -webkit-transform-origin: left;
        transform-origin: left;
        opacity: 0;
    }
    100% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
        -webkit-transform-origin: left;
        transform-origin: left;
        opacity: 1;
    }
}
.swing-in-left-bck {
    -webkit-animation: swing-in-left-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
    animation: swing-in-left-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
/* 中心外旋转 退出 */
@-webkit-keyframes rotate-out-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
        opacity: 0;
    }
}
@keyframes rotate-out-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
        opacity: 0;
    }
}
.rotate-out-center {
    -webkit-animation: rotate-out-center 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: rotate-out-center 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}


@-webkit-keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}
@keyframes blink-2 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

.blink-2 {
    -webkit-animation: blink-2 0.9s ;
    animation: blink-2 0.9s ;
}

/* 切线退出 */
@-webkit-keyframes slit-out-diagonal-1 {
    0% {
        -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0);
        transform: translateZ(0) rotate3d(1, 1, 0, 0);
        opacity: 1;
    }
    54% {
        -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
        transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
        transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
        opacity: 0;
    }
}
@keyframes slit-out-diagonal-1 {
    0% {
        -webkit-transform: translateZ(0) rotate3d(1, 1, 0, 0);
        transform: translateZ(0) rotate3d(1, 1, 0, 0);
        opacity: 1;
    }
    54% {
        -webkit-transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
        transform: translateZ(-160px) rotate3d(1, 1, 0, 87deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
        transform: translateZ(-800px) rotate3d(1, 1, 0, 90deg);
        opacity: 0;
    }
}
.slit-out-diagonal-1 {
    -webkit-animation: slit-out-diagonal-1 0.5s ease-in both;
    animation: slit-out-diagonal-1 0.5s ease-in both;
}

/* 淡出 */
@-webkit-keyframes fade-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
}
@keyframes fade-out-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }
}
.fade-out-right {
    -webkit-animation: fade-out-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-out-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
